<template>
  <view>
    <view class="co-load-more" :style="{ color: color, fontSize: fontSize }">
      <view v-show="type === 1" :style="{ padding: padding }">
        <slot name="empty">
          <view class="co-load-more__item am-flex-rc-center">{{
            emptyText
          }}</view>
        </slot>
      </view>
      <view v-show="type === 2" :style="{ padding: padding }">
        <slot name="loading">
          <view class="co-load-more__item am-flex-rc-center">
            <u-loading mode="circle" :color="iconColor"></u-loading>
            <text style="margin-left: 20rpx">{{ loadingText }}</text>
          </view>
        </slot>
      </view>
      <view v-show="type === 3" :style="{ padding: padding }">
        <slot name="noMore">
          <view class="co-load-more__item am-flex-rc-center">{{
            noMoreText
          }}</view>
        </slot>
      </view>
      <view v-show="type === 4" @click="loadmore" :style="{ padding: padding }">
        <slot name="retry">
          <view class="co-load-more__item am-flex-rc-center">{{
            beforeText
          }}</view>
        </slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'co-load-more',
  props: {
    /**
     * 1 空数据
     * 2 加载中
     * 3 没有更多了
     * 4 加载前（重试）
     *
     * */
    type: {
      type: Number,
      default: () => 999
    },
    emptyText: {
      type: String,
      default: () => '暂无数据'
    },
    loadingText: {
      type: String,
      default: () => '数据加载中...'
    },
    noMoreText: {
      type: String,
      default: () => '没有更多了'
    },
    // 加载前文本
    beforeText: {
      type: String,
      default: () => '点击或上拉加载更多'
    },
    // 加载中的图标颜色
    iconColor: {
      type: String,
      default: () => '#b7b7b7'
    },
    // 字体颜色
    color: {
      type: String,
      default: () => '#666'
    },
    // 字体大小，需要带单位
    fontSize: {
      type: [String, Number],
      default: () => '28rpx'
    },
    // 间距
    padding: {
      type: String,
      default: () => '25px 16rpx'
    }
  },
  methods: {
    loadmore() {
      this.$emit('loadmore')
    }
  }
}
</script>
<style lang="scss" scoped>
.co-load-more {
  background: #fff;
}
</style>
